<template>
  <div class="es-block">
    <Title>顺义危房险屋统计图</Title>
    <div style="width: 100%; height: 100%; padding-top: 30px">
      <Chart :option="option" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Title from '../Title.vue'
import Chart from '@/components/chart/Chart.vue'
import allData from '@/assets/data/seller.json'
import * as echarts from 'echarts'

const barWidth = 14
const option = ref({
  grid: {
    top: '10%',
    left: '5%',
    right: '10%',
    bottom: '5%',
    containLabel: true, // 距离是包含坐标轴上的文字
  },
  legend: {
    data: ['户数', '人数'],
    textStyle: {
      color: '#eee',
    },
  },
  xAxis: {
    type: 'value',
    splitLine: { show: false },
    axisLine: { show: true },
  },
  yAxis: {
    type: 'category',
    axisTick: { show: false },
    data: allData.map((item) => {
      return item.name
    }),
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      z: 0,
      lineStyle: {
        color: '#2D3443',
      },
    },
  },
  series: [
    {
      type: 'bar',
      name: '户数',
      label: {
        show: true,
        position: 'right',
      },
      barWidth: barWidth,
      roundCap: true,
      itemStyle: {
        borderWidth: 0,
        borderRadius: [0, barWidth / 2, barWidth / 2, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#0BA82C',
          },
          {
            offset: 1,
            color: '#4FF778',
          },
        ]),
      },
      data: allData.map((item) => {
        return item.homeCount
      }),
    },
    {
      name: '人数',
      type: 'bar',
      label: {
        show: true,
        position: 'right',
      },
      barWidth: barWidth,
      roundCap: true,
      itemStyle: {
        borderWidth: 0,
        borderRadius: [0, barWidth / 2, barWidth / 2, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#5052EE',
          },
          {
            offset: 1,
            color: '#AB6EE5',
          },
        ]),
      },
      data: allData.map((item) => {
        return item.personCount
      }),
    },
  ],
})
</script>

<style lang="scss" scoped>
.es-block {
  width: 100%;
  height: 100%;
}
</style>
